<template>
	<view class="profile-box">
		<!-- 登录 -->
		<view>
			<view class="login-box" v-if="!isLogin">
				<image src="/static/image/user-big.png" mode="aspectFill" class="ava-img"></image>
				<text class="login-txt" @click="toLogin">登录 / 注册</text>
			</view>
			<view class="login-box" v-else>
				<image :src="getUserInfo.avatarUrl" mode="aspectFill" class="ava-img"></image>
				<text class="login-txt">{{getUserInfo.nickName}}</text>
			</view>
		</view>
		<!-- 订单 -->
		<view class="order-box">
			<view class="oreder-all">
				<view class="gg gg1">
					<image src="/static/me/note.png" mode="aspectFill" class="com-img"></image>
					<text class="txt1">购买</text>
				</view>
				<view class="gg gg2" @click="allBtn">
					<text class="txt2">全部订单</text>
					<image src="/static/category/right.png" mode="aspectFill" class="img2"></image>
				</view>
			</view>
			<view class="pay-box">
				<view class="item-pay" v-for="(item, index) in imgList" :key="index">
					<view class="item-box" @click="otherBtn(index)">
						<image :src="item.imgSrc" mode="aspectFill" class="com1-img"></image>
						<text class="item-txt">{{item.imgInfo}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<block v-for="(item, index) in listData" :key="index">
			<view class="list-item clearfix" @click="btnList(index)">
				<image :src="item.imgSrc" mode="aspectFill" class="left list-img"></image>
				<text class="left txt-coin">{{item.imgInfo}}</text>
				<image src="/static/category/right.png" mode="aspectFill" class="right list-right"></image>
			</view>
		</block>
	</view>
</template>

<script>
	import { mapGetters, mapState, mapActions } from 'vuex'
	export default {
		data() {
			return {
				isShow: true,
				imgList: [
					{
						imgSrc: '/static/me/pay.png',
						imgInfo: "待付款"
					},
					{
						imgSrc: '/static/me/fa-huo.png',
						imgInfo: "待发货"
					},
					{
						imgSrc: '/static/me/shou-huo.png',
						imgInfo: "待收货"
					},
				],
				listData: [
					{
						imgSrc: '/static/me/money.png',
						imgInfo: "账户"
					},
					{
						imgSrc: '/static/me/cart.png',
						imgInfo: "卡卷"
					},
					{
						imgSrc: '/static/me/note.png',
						imgInfo: "洗护订单"
					},
					{
						imgSrc: '/static/me/address.png',
						imgInfo: "地址管理"
					},
					{
						imgSrc: '/static/me/message.png',
						imgInfo: "消息通知"
					},
					{
						imgSrc: '/static/me/ke-fu.png',
						imgInfo: "客服中心"
					}
				]
			}
		},
		computed: {
			...mapState(['isLogin']),
			...mapGetters(['getUserInfo'])
		},
		methods: {
			...mapActions({
				getOrderData: 'getOrderData'
			}),
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			//进入列表的判断以及操作
			btnList(x) {
				//如果没有登录
				if(!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				else {
					// 地址管理
					if(x === 3) {
						uni.navigateTo({
							url: '/pages/address/address'
						})
					}
				}
			},
			// 全部订单
			allBtn() {
				//如果没有登录
				if(!this.isLogin) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
				else {
					uni.navigateTo({
						url: '/pages/allOrder/allOrder?type=3'
					})
				}
			},
			// 待付款等按钮的点击事件
			otherBtn(index) {
				if(!this.isLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
				else {
					uni.navigateTo({
						url: '/pages/allOrder/allOrder?type='+index
					})
				}
			}
		},
		onShow() {
			if(this.isLogin) {
				this.getOrderData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-box {
		padding: 40rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 14rpx solid #f5f5f9;
		.ava-img {
			width: 88rpx;
			height: 88rpx;
			vertical-align: middle;
		}
		.login-txt {
			margin-left: 20rpx;
			font-size: 38rpx;
		}
	}
	.com-img {
		width: 40rpx;
		height: 50rpx;
		vertical-align: middle;
	}
	.com1-img {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}
	.order-box {
		padding: 40rpx;
		border-bottom: 4rpx solid #f5f5f9; 
		.oreder-all {
			display: flex;
			.gg {
				flex: 1;
			}
			.txt1 {
				margin-left: 20rpx; 
			}
			.gg2 {
				text-align: right;
				.img2 {
					width: 35rpx;
					height: 35rpx;
					margin-left: 10rpx;
					vertical-align: middle;
				}
			}
		}
		.pay-box {
			display: flex;
			margin-top: 40rpx;
			.item-pay {
				flex: 1;	
			}
			.item-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.item-txt {
				margin-top: 10rpx;
				font-size: 26rpx;
			}
		}
	}
	.list-item {
		width: $uni-width;
		height: 113rpx;
		padding: 40rpx 40rpx;
		box-sizing: border-box;
		border-bottom: 4rpx solid #f5f5f9;
		.list-img {
			width: 50rpx;
			height: 50rpx;
		}
		.list-right {
			width: 35rpx;
			height: 35rpx;
		}
		.txt-coin {
			margin-left: 20rpx;
			font-size: 32rpx;
		}
	}
</style>
